<!--成片条件搜索-->
<template>
  <el-form
    :model="form"
    label-width="100px"
    @keyup.enter.native="submit"
    @submit.native.prevent
  >
    <el-card shadow="none" body-style="padding: 25px 22px 25px 0px;">
    <el-row :gutter="120">
      <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
        <el-form-item label="任务名称:" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入任务名称"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
        <el-form-item label="文件夹名称 :" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入文件夹名称"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
        <el-form-item label="设备名称 :" prop="name">
          <el-input
            v-model="form.name"
            placeholder="请输入设备名称"
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
        <el-form-item label="设备状态 :" prop="name">
          <el-select
            v-model="form.onState"
            placeholder="请选择设备状态"
            class="ele-fluid"
            clearable
          >
            <el-option label="使用中" :value="1" />
            <el-option label="空闲中" :value="2" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
        <el-form-item label="创建时间:" prop="datetime">
          <el-date-picker
            v-model="form.datetime"
            type="daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd HH:mm:ss"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="ele-fluid"
            @change="select"
          />
        </el-form-item>
      </el-col>
      <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
        <el-form-item label="结束时间:" prop="datetime">
          <el-date-picker
            v-model="form.datetime"
            type="daterange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd HH:mm:ss"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="ele-fluid"
            @change="select"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row style="margin-left: 30px">
      <el-col :xs="12" :sm="12" :lg="8" :xl="8">
        <el-button
          icon="el-icon-zoom-out"
          size="small"
          type="primary"
          class="colorBlue"
          @click="search()"
        >
          查询
        </el-button>
        <el-button
          icon="el-icon-refresh-right"
          size="small"
          class="resetting-btn"
          @click="reset()"
        >
          重置
        </el-button>
      </el-col>
    </el-row>
  </el-card>
  </el-form>
</template>

<script>
    export default {
        name: "task-search",
      data(){
        // 默认表单数据
        const defaultForm = {
          username: '',
          nickname: '',
          deleted: '0',
          sex: undefined
        };
        return{
          form: { ...defaultForm },
        }
      },
      methods:{

        /* 搜索 */
        search() {
          this.$emit('search', this.form);
        },
        /*  重置 */
        reset() {
          this.form = { ...this.defaultForm };
          this.search();
        }
      }
    }
</script>

<style scoped>

</style>
